<template>
  <div :class="['pui-input', size, full && 'full-fill']" :style="{ width: width }">
    <pui-icon v-if="type === 'search' && iconPosition === 'left'" name="search" @click.stop="onIconClickHandle"></pui-icon>
    <pui-icon v-if="icon && iconPosition === 'left'" :name="icon" @click.stop="onIconClickHandle"></pui-icon>
    <input
      class="pui-input_frame"
      type="text"
      v-model="props.modelValue"
      :placeholder="placeholder"
      :disabled="disabled"
      :readonly="readonly"
      @input="onInputHandle"
    />
    <pui-icon v-if="type === 'input' && icon && iconPosition === 'right'" :name="icon" @click.stop="onIconClickHandle"></pui-icon>
    <pui-icon v-if="type === 'search' && iconPosition === 'right'" name="search" @click.stop="onIconClickHandle"></pui-icon>
    <pui-icon v-if="clearAble && modelValue !== ''" name="cancle" @click.stop="clearModelValue"></pui-icon>
    <slot></slot>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
  name: 'pui-input',
});
</script>

<script lang="ts" setup>
import type { Props } from './interface';

const props = withDefaults(defineProps<Props>(), {
  modelValue: '',
  size: 'normal',
  type: 'input',
  iconPosition: 'left',
  placeholder: '请输入',
  disabled: false,
  readonly: false,
  full: false,
  clearAble: false,
});

const emits = defineEmits<{
  'update:modelValue': [value: string | number];
  'update:showPopper': [val?: boolean];
  onClear: [];
  onInput: [val: boolean];
  onIconClick: [val: boolean];
}>();

const clearModelValue = () => {
  emits('onClear');
  emits('update:modelValue', '');
};

const onInputHandle = (e: any) => {
  emits('onInput', e);
  emits('update:modelValue', e.target.value);
};
const onIconClickHandle = () => {
  emits('onIconClick', true);
};
</script>
